<template>
    <el-drawer title="留言板" :visible.sync="drawer" direction="rtl" size="560px" class="SHZY-common-drawer board"
        :wrapperClosable="false" append-to-body @close="handleClearInterval">
        <div class="im-container">
            <div class="main">
                <div class="chatBox">
                    <div class="chatList" ref="chatList">
                        <el-divider v-if="list.length > 0">
                            <el-button type="text" @click="openHistory">查看全部消息</el-button>
                        </el-divider>
                        <div class="chatList-item" v-for="(item, index) in list" :key="index"
                            :class="{ 'chatList-item--mine': item.sendUserId == userInfo.userId }">
                            <div class="chatList-user" v-if="item.sendUserId == userInfo.userId">
                                <el-avatar :size="40" :src="define.comUrl + userInfo.headIcon" />
                                <cite><i>{{ item.sendTime }}</i>我</cite>
                            </div>
                            <div class="chatList-user" v-else>
                                <el-avatar :size="40" :src="define.comUrl + item.headIcon" />
                                <cite>{{ item.realName }}<i>{{ item.sendTime }}</i></cite>
                            </div>
                            <div class="chatList-text">
                                <div class="chatList-arrow"></div>
                                <p v-if="item.contentType == 'text'" v-html="item.content" class="chatList__msg--text">
                                </p>
                                <el-image :src="define.comUrl + item.content.path" class="chatList__msg--img"
                                    v-if="item.contentType == 'image' && item.content.path"
                                    :preview-src-list="[define.comUrl + item.content.path]" :z-index="10000">
                                </el-image>
                            </div>
                        </div>
                    </div>
                    <div class="toolBox">
                        <div class="toolBox-left">
                            <el-popover placement="top-start" trigger="click" ref="popover" v-model="popoverVisible">
                                <div class="emjioBox">
                                    <ul class="emjio">
                                        <li v-for="(item, i) in this.emojiList" :key="i" @click="selectEmit(item)">
                                            <img :src="item.url | urlFilter()" />
                                        </li>
                                    </ul>
                                </div>
                                <el-link icon="ym-custom ym-custom-emoticon-neutral" :underline="false" title="发送表情"
                                    slot="reference">
                                </el-link>
                            </el-popover>
                            <el-upload :show-file-list="false" :action="define.comUploadUrl + '/IM'" :limit="1"
                                class="uploadImg-btn" :headers="{ Authorization: $store.getters.token }"
                                :on-success="handleSuccess" :before-upload="beforeUpload" ref="upload" accept="image/*">
                                <el-link icon="ym-custom ym-custom-image" :underline="false" title="发送图片">
                                </el-link>
                            </el-upload>
                        </div>

                        <div class="toolBox-right">
                            <user-select ref="toUserId" v-model="toUserId" placeholder="发送给特定人" />
                        </div>
                    </div>
                    <div class="writeBox">
                        <el-input type="textarea" :rows="3" placeholder="点击这里，直接输入消息咨询" v-model.trim="messageContent"
                            @keyup.enter.native="sendMessage" />
                        <div class="btns">
                            <el-button type="primary" @click="sendMessage()" :loading="btnLoading">发 送</el-button>
                        </div>
                    </div>
                </div>
                <div class="historyBox" v-if="showHistory">
                    <div class="header">
                        <span class="name">全部消息记录</span>
                        <el-link icon="el-icon-close" :underline="false" @click="showHistory = false"></el-link>
                    </div>
                    <el-input v-model="keyword" placeholder="搜索：请输入关键词" class="SHZY-common-head-input" clearable
                        @change="searchHistory">
                        <i slot="suffix" class="el-input__icon el-icon-search" @click="searchHistory()" />
                    </el-input>
                    <div class="historyList-box" ref="historyListBox">
                        <div class="chatList historyList">
                            <div class="chatList-item" v-for="(item, index) in historyList" :key="index">
                                <div class="chatList-user" v-if="item.sendUserId == userInfo.userId">
                                    <el-avatar :size="40" :src="define.comUrl + userInfo.headIcon" />
                                    <cite>我<i>{{ item.sendTime }}</i></cite>
                                </div>
                                <div class="chatList-user" v-else>
                                    <el-avatar :size="40" :src="define.comUrl + item.headIcon" />
                                    <cite>{{ item.realName }}<i>{{ item.sendTime }}</i></cite>
                                </div>
                                <div class="chatList-text">
                                    <div class="chatList-arrow"></div>
                                    <span v-if="item.contentType == 'text'" v-html="item.content"></span>
                                    <el-image :src="define.comUrl + item.content.path" class="chatList__msg--img"
                                        v-if="item.contentType == 'image' && item.content.path"
                                        :preview-src-list="[define.comUrl + item.content.path]" :z-index="10000">
                                    </el-image>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </el-drawer>
</template>
  
<script>

import { mapGetters } from 'vuex'
import emojiList from 'static/emoji.json';
import { getMessageboardList, createMessageboard, delMessageboard } from '@/api/q1/business/messageBoard'
export default {
    name: 'messageBoard',
    computed: {
        ...mapGetters(['userInfo']),
    },
    filters: {
        urlFilter(url) {
            return require(`static/emoji/${url}`)
        }
    },
    data() {
        return {
            timer:"",
            id: "",
            code: "",
            inspectorId: "",
            type: "",
            toUserId: "",
            keyword: "",
            showHistory: false,
            drawer: false,
            btnLoading: false,
            imgSrc: '',
            messageContent: '',
            emojiList: emojiList,
            list: [],
            historyList: [],
            currentPage: 1,
            pageSize: 30,
            sort: "desc",
            finish: false,
            ajaxing: false,
            popoverVisible: false,
        }
    },
    mounted(){
        
    },
    methods: {
        init(id, code, inspectorId, type) {
            this.id = id
            this.code = code
            this.inspectorId = inspectorId
            this.type = type
            this.toUserId = ""
            this.keyword = ""
            this.currentPage = 1
            this.pageSize = 30
            this.sort = "desc"
            this.showHistory = false
            this.drawer = true
            this.socket = this.$store.getters.socket
            this.getList()
            this.handleClearInterval()
            this.timer = setInterval(this.getList, 3000); 
        },
        scroll(num) {
            setTimeout(() => {
                this.$nextTick(() => {
                    let ele = this.$refs.chatList
                    if (ele.scrollHeight > ele.clientHeight) {
                        //设置滚动条到最底部
                        ele.scrollTop = ele.scrollHeight;
                    }
                })
            }, num || 0);
        },
        getList() {
            this.ajaxing = true
            let query = {
                currentPage: this.currentPage,
                pageSize: this.pageSize,
                sort: this.sort,
                parentId: this.id,
                type: this.type,
                keyword: this.keyword
            };
            getMessageboardList(query).then(res => {
                let list = []
                for (let i = 0; i < res.data.list.length; i++) {
                    const item = res.data.list[i];
                    if (item.contentType === "text") {
                        item.content = this.replaceEmoji(item.content)
                    } else if (item.contentType === "image") {
                        item.content = JSON.parse(item.content)
                    } else {
                        item.content = JSON.parse(item.content)
                    }
                    list.push({
                        sendUserId: item.sendUserId,
                        realName: item.realName,
                        headIcon: item.headIcon,
                        content: item.content,
                        contentType: item.contentType,
                        sendTime: this.shzy.toDate(item.sendTime)
                    })
                }
                if (!this.showHistory) {
                    this.list = list
                    this.$nextTick(() => {
                        this.scroll(800)
                    })
                } else {
                    this.historyList = [...this.historyList, ...list]
                    this.currentPage += 1
                    this.finish = list.length < res.data.pagination.pageSize
                }
                this.ajaxing = false
            })
        },
        handleSendMessage(dataForm) {
            this.btnLoading = true;
            createMessageboard(dataForm).then((res) => {
                this.btnLoading = false;
                if (res.code == 200) {
                    this.list.push({
                        sendUserId: this.userInfo.userId,
                        realName: this.userInfo.realName,
                        headIcon: this.userInfo.headIcon,
                        contentType: dataForm.contentType,
                        content: dataForm.contentType == "text" ? this.replaceEmoji(dataForm.content) : dataForm.content,
                        sendTime: this.shzy.toDate(new Date())
                    })
                    let socket = this.socket
                    if (this.toUserId != "") {
                        let messageContent = {
                            id: this.id,
                            code: this.code,
                            type: this.type,
                            content: dataForm.content,
                            from: "MessageBoard",
                        }
                        let sendMessage = {
                            method: "SendMessage",
                            toUserId: this.toUserId,
                            messageType: "text",
                            messageContent: messageContent,
                            token: this.$store.getters.token,
                        }
                        socket.send(JSON.stringify(sendMessage));
                    }
                    if (this.userInfo.userId != this.inspectorId && this.toUserId != this.inspectorId) {
                        let messageContent = {
                            id: this.id,
                            code: this.code,
                            type: this.type,
                            content: dataForm.content,
                            from: "MessageBoard",
                        }
                        let sendMessage = {
                            method: "SendMessage",
                            toUserId: this.inspectorId,
                            messageType: "text",
                            messageContent: messageContent,
                            token: this.$store.getters.token,
                        }
                        socket.send(JSON.stringify(sendMessage));
                    }

                    if (dataForm.contentType == "image") {
                        this.scroll(500)
                    } else {
                        this.scroll()
                    }
                    this.messageContent = ''
                }

            }).catch((res) => {
                this.btnLoading = false;
            })
        },
        sendMessage() {
            if (!this.messageContent) {
                return
            }
            let dataForm = {
                parentId: this.id,
                type: this.type,
                content: this.messageContent,
                contentType: "text",
                sendUserId: this.userInfo.userId,
                sendTime: new Date()
            }
            this.handleSendMessage(dataForm)
        },
        handleSuccess(res, file, fileList) {
            if (res.code == 200) {
                if (!res.data || !res.data.name) return
                const name = res.data.name
                const url = res.data.url
                this.getBase64(file.raw).then(res => {
                    let data = res
                    this.getImgSize(data.e).then(res => {
                        let messageContent = {
                            name,
                            path: url,
                            width: res.width,
                            height: res.height
                        }
                        let dataForm = {
                            parentId: this.id,
                            type: this.type,
                            content: messageContent,
                            contentType: "image",
                            sendUserId: this.userInfo.userId,
                            sendTime: new Date()
                        }
                        this.handleSendMessage(dataForm)
                    })
                })
            } else {
                fileList = []
                this.$message({ message: res.msg, type: 'error', duration: 1500 })
            }
            this.$refs.upload.clearFiles()
        },
        beforeUpload(file) {
            let isRightSize = file.size < 1024 * 1024 * 5
            if (!isRightSize) {
                this.$message.error(`图片大小不能超过5M`)
            }
            return isRightSize;
        },
        getBase64(file) {
            let _this = this
            return new Promise(function (resolve, reject) {
                let reader = new FileReader()
                let msg = { base64: '', e: null }
                reader.readAsDataURL(file)
                reader.onload = function (event) {
                    msg.base64 = reader.result.replace(/data:image\/.*;base64,/, '')
                    msg.e = event
                }
                reader.onerror = function (error) {
                    reject(error)
                }
                reader.onloadend = function () {
                    resolve(msg)
                }
            })
        },
        getImgSize(event) {
            return new Promise(function (resolve, reject) {
                let size = { width: 0, height: 0 }
                const txt = event.target.result
                const img = document.createElement("img")
                img.src = txt
                img.onload = function () {
                    size.width = img.width
                    size.height = img.height
                    resolve(size)
                }
                img.onerror = function (error) {
                    reject(error)
                }
            })
        },
        replaceEmoji(str) {	//替换表情符号为图片
            let replacedStr = str.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {
                let obj = ''
                for (let i = 0; i < this.emojiList.length; i++) {
                    let row = this.emojiList[i];
                    if (row.alt == item) {
                        let url = require(`static/emoji/${row.url}`)
                        obj = `<img src="${url}" class="chatList-text-emoji" />`
                        break
                    }
                }
                return obj
            });
            str = replacedStr;
            return str
        },
        // 选择表情
        selectEmit(item) {
            this.messageContent += item.alt;
            this.popoverVisible = false
        },
        openHistory() {
            this.showHistory = !this.showHistory
            if (this.showHistory) {
                this.historyList = []
                this.currentPage = 1
                this.pageSize = 30
                this.sort = "asc"
                this.finish = false
                this.getList()
                this.$nextTick(() => {
                    this.bindScroll();
                })
            }
        },
        searchHistory() {
            this.currentPage = 1
            this.pageSize = 30
            this.sort = "asc"
            this.finish = false
            this.historyList = []
            this.getList()
            this.$nextTick(() => {
                let ele = this.$refs.historyListBox
                ele.scrollTop = 0;
            })
        },
        bindScroll() {
            let _this = this,
                ele = _this.$refs.historyListBox;
            if (!ele) return
            ele.addEventListener("scroll", function () {
                if (_this.finish || _this.ajaxing) return
                if (ele.scrollTop >= ele.scrollHeight - ele.clientHeight - 100) _this.getList()
            });
        },
        handleClearInterval(){
            clearInterval(this.timer);
        }
    },
    beforeDestroy() {
        clearInterval(this.timer);
    },
}
</script>
<style lang="scss" scoped>
.im-container {
    height: 100%;
    background: #e6e9f0;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.1) !important;

    * {
        box-sizing: border-box;
    }


    .main {
        display: flex;
        height: 100%;

        .chatBox {
            width: 600px;
            height: 100%;

            .chatList {
                height: calc(100% - 150px);
                overflow: auto;
                overflow-x: hidden;
                padding: 5px 15px 5px;
                background: #fff;
            }

            .toolBox {
                height: 35px;
                display: flex;
                justify-content: space-between;
                padding: 0 5px;
                align-items: center;
                font-size: 0;

                i {
                    line-height: 35px;
                    font-size: 20px;
                    margin-right: 10px;
                    color: #6b7a99;
                    cursor: pointer;
                }

                .toolBox-left {
                    >>>.el-link {
                        line-height: 35px;

                        i {
                            font-size: 20px;
                            margin-right: 10px;
                        }
                    }

                    .uploadImg-btn {
                        display: inline-block;
                    }
                }

                .toolBox-right {
                    color: #6b7a99;
                    line-height: 35px;
                    font-size: 14px;

                    >>>.el-link {
                        line-height: 35px;

                        i {
                            font-size: 18px;
                            margin-right: 5px;
                        }
                    }
                }
            }

            .writeBox {
                background: #fff;
                height: 110px;

                >>>.el-textarea {
                    .el-textarea__inner {
                        border: none;
                        resize: none;
                    }
                }

                .btns {
                    padding-right: 10px;
                    text-align: right;
                }
            }
        }


        .historyBox {
            position: fixed;
            right: 565px;
            top: 5px;
            z-index: 3000;
            width: 350px;
            height: 530px;
            background: #fff;

            .header {
                background: #fff;
                height: 50px;
                border-bottom: 1px solid #dcdfe6;
                padding: 0 10px;
                font-size: 0;
                color: #475059;

                .el-avatar {
                    margin-top: 10px;
                    vertical-align: top;
                    margin-right: 10px;

                    &.offLine {
                        filter: grayscale(1);
                    }
                }

                span {
                    line-height: 49px;
                    font-size: 16px;
                    color: #475059;
                }

                .el-link {
                    float: right;

                    >>>.el-icon-close {
                        font-size: 20px;
                        margin-top: 15px;
                    }
                }
            }

            .el-input {
                >>>.el-input__inner {
                    border-radius: 0;
                    border-right: none;
                    border-left: none;
                    border-top: none;
                }

                .el-input__icon {
                    cursor: pointer;

                    &:hover {
                        color: #46a6ff;
                    }
                }
            }

            .historyList-box {
                height: 448px;
                overflow: auto;
                overflow-x: hidden;
                padding: 5px;
                border-bottom-right-radius: 4px;

                .chatList-item .chatList-text {
                    max-width: 94%;
                }

                .chatList__msg--audio {
                    width: 230px;
                }
            }
        }
    }

    .chatList-item {
        position: relative;
        font-size: 0;
        margin-bottom: 10px;
        padding-left: 60px;
        min-height: 68px;
        text-align: left;

        .chatList-user,
        .chatList-text {
            display: inline-block;
            /* @css { * }display: inline;
    @css { * }zoom: 1; */
            vertical-align: top;
            font-size: 14px;
        }

        .chatList-user {
            position: absolute;
            cursor: pointer;
            left: 3px;
        }

        .chatList-user img {
            &.offLine {
                filter: grayscale(1);
            }
        }

        .chatList-user cite {
            position: absolute;
            left: 60px;
            top: -2px;
            /* width: 500px; */
            line-height: 24px;
            font-size: 12px;
            white-space: nowrap;
            color: #999;
            text-align: left;
            font-style: normal;
        }

        .chatList-user cite i {
            padding-left: 15px;
            font-style: normal;
        }

        .chatList-text {
            max-width: 75%;
            position: relative;
            line-height: 22px;
            margin-top: 25px;
            padding: 8px 15px;
            background-color: #f3f3f3;
            border-radius: 3px;
            border: 1px solid #f0f0f0;
            color: #000;
            word-break: break-all;
        }

        .chatList__msg--text {
            line-height: 24px;

            >>>img {
                vertical-align: top;
                width: 24px;
                height: 24px;
                display: inline-block;
            }
        }

        .chatList-arrow {
            top: 6px;
            left: -8px;
            position: absolute;
            display: block;
            width: 0;
            height: 0;
            border-color: transparent;
            border-style: solid;
            border-width: 8px;
            border-left-width: 0;
            border-right-color: #ebeef5;
        }

        .chatList-arrow::after {
            content: ' ';
            top: -7px;
            left: 1px;
            position: absolute;
            display: block;
            width: 0;
            height: 0;
            border-color: transparent;
            border-style: solid;
            border-width: 7px;
            border-left-width: 0;
            border-right-color: #ebeef5;
        }

        &.chatList-item--mine .chatList-text .chatList-arrow {
            left: auto;
            right: -5px;
            border-color: transparent;
            border-style: solid;
            border-width: 8px;

            border-right-width: 0;
            border-left-color: #409eff;
        }

        &.chatList-item--mine .chatList-text .chatList-arrow::after {
            left: auto;
            right: -2px;
            border-color: transparent;
            border-style: solid;
            border-width: 7px;
            border-right-width: 0;
            border-left-color: #409eff;
        }

        &.chatList-item--mine {
            text-align: right;
            padding-left: 0;
            padding-right: 60px;
        }

        &.chatList-item--mine .chatList-user {
            left: auto;
            right: 3px;
        }

        &.chatList-item--mine .chatList-user cite {
            left: auto;
            right: 60px;
            text-align: right;
        }

        &.chatList-item--mine .chatList-user cite i {
            padding-left: 0;
            padding-right: 15px;
        }

        &.chatList-item--mine .chatList-text {
            margin-left: 0;
            text-align: left;
            background-color: #409eff;
            color: #fff;
        }

        .chatList__msg--video,
        .chatList__msg--file {
            position: relative;
            max-width: 100%;
            min-width: 200px;
            width: 100%;
            margin: 10px 0;
            overflow: hidden;
            border-radius: 5px;
            cursor: pointer;
            display: block;
        }

        .chatList__msg--img {
            position: relative;
            max-width: 200px;
            width: 100%;
            margin: 10px 0;
            overflow: hidden;
            border-radius: 5px;
            cursor: pointer;
            display: block;
        }
    }
}

.emjioBox {
    background: #fff;
    height: 150px;
    width: 300px;
    overflow: auto;
    text-align: left;
}

.emjioBox .emjio {
    padding: 0;
}

.emjioBox li {
    display: inline-block;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    cursor: pointer;
}
</style>
<style lang="scss">
.el-popover {
    z-index: 30000 !important;
}
</style>